<template>
  <v-ons-page>
    <!-- 样式1 -->
    <div class="style1" v-if="theme == 1">
      <!-- 轮播 -->
      <v-ons-carousel fullscreen swipeable auto-scroll auto-scroll-rati="1" auto-refresh="true" overscrollable
                      :index.sync="carouselIndex" class="carousel">
        <v-ons-carousel-item v-for="(value, key) in items" class="carousel">
          <!--<div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">{{key}}</div>-->
          <img src="../../assets/resource/consumer/home/style1/banner.jpg" alt="">
        </v-ons-carousel-item>
      </v-ons-carousel>

      <div class="search">
        <div class="search-group">
          <div class="ons-col">
            <img
              src="../../assets/resource/consumer/home/style1/search.png"
              alt="">
          </div>
          <div class="ons-col">
            <input placeholder="皮？" float class="input"/>
          </div>
          <div class="ons-col">
            <button class="button">搜索</button>
          </div>
        </div>
      </div>

      <!-- 系统通知 -->
      <v-ons-carousel fullscreen swipeable auto-scroll auto-scroll-rati="1" auto-refresh="true" direction="vertical"
                      overscrollable
                      :index.sync="carouselIndex" class="notice">
        <v-ons-carousel-item v-for="(value, key) in items" class="notice-item">
          <div class="ons-col">
            <img
              src="../../assets/resource/consumer/home/style1/notify.png"
              alt="">
          </div>
          <div class="ons-col">
            萨达萨达
          </div>
        </v-ons-carousel-item>
      </v-ons-carousel>

      <!-- 入口 -->
      <div class="ingress">
        <div class="tab-bar">
          <button :class="tabbarIndex == 1 ? 'active':''" @click="selectTabbar({item:1})">
            帮我买
          </button>
          <button :class="tabbarIndex == 2 ? 'active':''" @click="selectTabbar({item:2})">
            帮我送
          </button>
          <button :class="tabbarIndex == 3 ? 'active':''" @click="selectTabbar({item:3})">
            帮排队
          </button>
        </div>
        <div class="ingress-group">

          <div class="ingress-item" @click="enterPage({path:'/ConsumerBuy'})" v-for="item in 5" v-if="tabbarIndex == 1">
            <img
              src="../../assets/resource/consumer/home/style1/ware-img.png"
              alt="">
            <p>帮我买</p>
          </div>

          <div class="ingress-item" @click="enterPage({path:'/ConsumerLargess'})" v-for="item in 5"
               v-if="tabbarIndex == 2">
            <img
              src="../../assets/resource/consumer/home/style1/ware-img.png"
              alt="">
            <p>帮我送</p>
          </div>

          <div class="ingress-item" @click="enterPage({path:'/ConsumerLineUp'})" v-for="item in 5"
               v-if="tabbarIndex == 3">
            <img
              src="../../assets/resource/consumer/home/style1/ware-img.png"
              alt="">
            <p>帮排队</p>
          </div>

        </div>
      </div>
    </div>

    <!-- 样式2 -->
    <div class="style2" v-if="theme == 2">
      <div class="head">
        <div class="address">
          <img src="../../assets/resource/consumer/home/style2/icon.png" alt=""> <span>朝阳区</span>
        </div>
        <div class="user-tip">
          <img src="../../assets/resource/consumer/home/style2/icon2.png" alt="">
          <p>附近20位跑男</p>
        </div>
        <div class="user-swiper">
          <v-ons-carousel class="scroll-view" swipeable auto-scroll overscrollable item-width="33%"
                          direction="horizontal">
            <v-ons-carousel-item v-for="i in 5">
              <div class="ingress-item">
                <img src="../../assets/resource/consumer/home/style2/nav-icon1.png" alt="">
                <p>入口</p>
              </div>
            </v-ons-carousel-item>
          </v-ons-carousel>
          <div class="scroll-icon-group">
            <span class="scroll-icon-item" :class="currentScrollIcon == 1? 'active' : ''"></span>
            <span class="scroll-icon-item" :class="currentScrollIcon == 2? 'active' : ''"></span>
            <span class="scroll-icon-item" :class="currentScrollIcon == 3? 'active' : ''"></span>
          </div>
        </div>
      </div>
      <div id="wx-map2" class="map"></div>
    </div>

    <!-- 样式3 -->
    <div class="style3" v-if="theme == 3">
      <div class="head">
        <div id="wx-map3" class="map"></div>
        <!-- 系统通知 -->
        <v-ons-carousel fullscreen swipeable auto-scroll auto-scroll-rati="1" auto-refresh="true" direction="vertical"
                        overscrollable
                        :index.sync="carouselIndex" class="notice">
          <v-ons-carousel-item v-for="(value, key) in items" class="notice-item">
            <div class="ons-col">
              <img
                src="../../assets/resource/consumer/home/style1/notify.png"
                alt="">
            </div>
            <div class="ons-col">
              萨达萨达
            </div>
          </v-ons-carousel-item>
        </v-ons-carousel>
        <!-- 当前位置 -->
        <img src="../../assets/resource/consumer/home/style3/b-icon3.png" class="local" alt="">
      </div>

      <div class="ingress-group">
        <div class="ingress-item" v-for="i in 5">
          <h3>帮我买</h3>
          <p>随便买</p>
        </div>
      </div>
    </div>

  </v-ons-page>
</template>

<script>


  export default {
    data() {
      return {
        theme: 3,
        currentScrollIcon: 1,
        carouselIndex: 0,
        items: {
          imgUrl: "https://www.135k.com/addons/sd_liferuning/tp/public/uploads//banner//201806/2018061938o90P15293937345821.jpg",
        },
        tabbarIndex: 1,
      };
    },
    methods: {
      enterPage({path: path}) {
        this.$router.push({
          path: path
        });
      },
      selectTabbar({item: item}) {
        this.tabbarIndex = item;
      },
      // 下标切换
      scrollIconGroupAction() {
        let _this = this;
        setTimeout(function () {
          _this.currentScrollIcon = _this.currentScrollIcon++ >= 3 ? 1 : _this.currentScrollIcon;
          _this.scrollIconGroupAction();
        }, 3000)
      }
    },
    mounted() {
      let mapId;
      if(this.theme == 2){
        mapId = "wx-map2";
      }else if(this.theme == 3){
        mapId = "wx-map3";
      }
      if(this.theme == 2 || this.theme == 3){
        let map = new qq.maps.Map(document.getElementById(mapId), {
          zoom: 14,
          // 地图的中心地理坐标。
          center: new qq.maps.LatLng(39.916527, 116.397128),
          zoomControl: false,
          mapTypeControl: false,
        });
      }
      // 初始化下标切换
      this.scrollIconGroupAction();
    }
  }
</script>

<style scoped lang="less">
  @import "../../assets/less/consumer/home.less";
</style>
